<template>
	<wsPage title="商户列表">
		<div slot="page_operate">
			<Button  @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<Row class="tab-demo">
			<Col span="24">
				<Button :class="{'ws-btn-active': queryForm.status == 2}" @click="changeStat(2)">已上线(
									<span class="ws-text-red" v-text="stat.status2"></span>)</Button>
				<Button :class="{'ws-btn-active': queryForm.status == 3}" @click="changeStat(3)">已下线(
									<span class="ws-text-red" v-text="stat.status3"></span>)</Button>
				<Button :class="{'ws-btn-active': queryForm.status == 1}" @click="changeStat(1)">待补全(
                <span class="ws-text-red" v-text="stat.status1"></span>)</Button>
			</Col>
		</Row>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="商户名称">
			            <Input v-model="queryForm.shop" placeholder="请输入"></Input>
			        </FormItem>
			        <FormItem label="联系人">
			            <Input v-model="queryForm.linkman" placeholder="请输入"></Input>
			        </FormItem>
				</Form>
			</div>
			<div slot="list_data">
				<ws-table :data="table.data" style="width: 100%">
					<ws-table-column align="center" prop="shop" label="商户名称"></ws-table-column>
					<ws-table-column align="center" label="商户Logo">
						<template slot-scope="scope">
							<div v-if="null != scope.row.logoImgUrl" style="border: 1px solid #CCCCCC; padding: 3px; ">
								<img :src="scope.row.logoImgUrl" width="60px" height="80px"/>
							</div>
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="productNum" label="商品数量"></ws-table-column>
					<ws-table-column align="center" prop="fansBase" label="粉丝数"></ws-table-column>
					<ws-table-column align="center" prop="linkman" label="联系人"></ws-table-column>
					<ws-table-column align="center" prop="email" label="邮箱"></ws-table-column>
					<ws-table-column align="center" prop="createDate" label="申请日期"></ws-table-column>
					<ws-table-column align="center" prop="currencySymbol" label="货币"></ws-table-column>
					<ws-table-column align="center" prop="countryName" label="所在国家"></ws-table-column>
					<ws-table-column align="center" prop="feedbackRate" label="好评率"></ws-table-column>

					<ws-table-column align="center" label="状态">
						<template slot-scope="scope">
							<Tag v-if="scope.row.status == 1" color="red">待补全</Tag>
							<Tag v-if="scope.row.status == 2" color="green">已上线</Tag>
							<Tag v-if="scope.row.status == 3" color="blue">已关闭</Tag>
      					</template>
					</ws-table-column>
					<ws-table-column align="center" width="160" label="操作">
						<template slot-scope="scope">
							<Button type="text" size="small" v-if="scope.row.status != 1" @click="changeStatus(scope.row)">{{scope.row.status == 3 ? '上线' : '下线'}}</Button>
							<Button type="text" size="small" v-if="scope.row.status != 1" @click="translate(scope.row)">店铺翻译</Button>
							<Button type="text" size="small" v-if="scope.row.status != 1" @click="setRate(scope.row)">设置好评</Button>
      					</template>
					</ws-table-column>
				</ws-table>
			</div>
		</wsSmPanel>



        <!--店铺翻译弹框-->
		<wsModal v-model="modal.show" :hide-footer="true" :title="modal.title"  :width="600">
			<Alert type="warning" show-icon v-show="alertshow">商户还未配置描述，不能进行翻译配置</Alert>
			<wsSmPanel v-show="insertshow">
				<div slot="list_operate" >
					<Button   @click="addLanguage()" >新增语言</Button>
				</div>
				<div slot="list_data">
					<ws-table :data="modal.table.data" style="width: 100%">
							<ws-table-column align="center" prop="motherTongue"  label="语言"></ws-table-column>
							<ws-table-column align="center"  prop="wDesc" label="店铺描述" show-overflow-tooltip></ws-table-column>
							<ws-table-column align="center"  width="160" label="操作">
								<template slot-scope="scope">
									<Button type="text" size="small"   @click="editmodel(scope.row)" v-if="scope.row.dft == 0">修改</Button>
									<Button type="text" size="small"   @click="deletemodel(scope.row)" v-if="scope.row.dft == 0">删除</Button>
									<Tag color="blue" v-if="scope.row.dft == 1">默认设置</Tag>
								</template>
							</ws-table-column>
					</ws-table>	
				</div>
			</wsSmPanel>
		</wsModal>

		<!--修改属性弹框-->
		<wsModal v-model="modal.editshow" ok-text="保存" :title="modal.edittitle"  @on-ok="isBlank"  @on-cancel="modalCancel">
		    <Form ref="modalForm" :model="modal.form" :rules="modal.rules" :label-width="100">
				<FormItem v-show="show1"  label="语言" prop="languageCode" required>
					<Select v-model="modal.form.languageCode">
						<Option v-for="item in languageList" :value="item.languageCode" :key="item.languageCode">{{ item.motherTongue }}</Option>
					</Select>
				</FormItem>

		        <FormItem v-show="show2" label="语言" prop="motherTongue" >
					<span>{{modal.form.motherTongue}}</span>
		        </FormItem>

		        <FormItem label="描述" prop="wDesc" required>
					<Input v-model="modal.form.wDesc" type="textarea"  :rows="6" autofocus/>
		        </FormItem>
		    </Form>			
		</wsModal>

		<!--设置好评率弹框-->
		<wsModal v-model="modal.showRateDialog" ok-text="保存" :title="modal.fanstitle"  @on-ok="modalSave"  @on-cancel="modalshowRateDialogCancel">
		    <Form ref="modalForm" :model="modal.formFansRate" :rules="modal.validate" :label-width="100">
		        <FormItem label="好评率(%)" prop="positiveFeedback">
		            <Input v-model="modal.formFansRate.positiveFeedback" ></input>
		        </FormItem>
		        <FormItem label="粉丝数" prop="fansBase">
		         <Input v-model="modal.formFansRate.fansBase"></input>
		        </FormItem>
		    </Form>			
		</wsModal>	

	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	import Common from '../../../common/common.js';
import { debug } from 'util';
	export default {
		data() {
			return {
				alertshow:'',
				insertshow:'',
				show1:false,
				show2:true,
				languageList: [],
				modal: {
					show: '',
					showRateDialog: '',
					editshow:'',
					addshow:false,
					title: "店铺翻译",
					edittitle: "修改店铺描述翻译",
					fanstitle: "设置粉丝数和好评率",
					table: {
						data: [],
				    },
					form: {
						languageCode:'',
						motherTongue:'',
						tenantId: '',
						wDesc: ''
					},
					formFansRate: {
						fansBase:'',
						positiveFeedback:'',
						email:''
					},
					rules: {
						languageCode: [
							{ required: true, message: '请选择店铺描述翻译语言'},
							// { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
						],
						wDesc: [
							{ required: true, message: '请输入该语言对应店铺描述'},
						],
					},
					edit: false
				},
                //条件查询
				queryForm: {
					shop: '',
					linkman: '',
					telephone: '',
					status: 2
				},
				table: {
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				},
				stat: {
					status1: 0,
					status2: 0,
					status3: 0
				}
			}
		},
		computed: {
			isEdit() {
		      return !Util.vad.isBlank(this.modal.form.languageCode);
		    }
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.initStat();
				this.query();
			},
			/**
			 * 初始化统计信息
			 */
			initStat() {
				let _this = this;
				this.axios.get("/ws/ms/merchants/stat").then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						let statMap = res.data;
						if(statMap) {
							this.stat.status1 = statMap["1"] || 0;
							this.stat.status2 = statMap["2"] || 0;
							this.stat.status3 = statMap["3"] || 0;
						}
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 切换统计
			 */
			changeStat(status) {
				this.queryForm.status = status;
				this.query();
			},
			//初始化所有支持的语言
			initAllLanguage() {
				let _this = this;
				this.axios.get("/ws/ms/languages").then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.languageList = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
				this.show1=true;
			    this.show2=false;
			},
			//店铺翻译
			translate(row) {
				let tenantId = row.tenantId;
				this.modal.show = true;
				this.modal.table.tenantId = row.tenantId;
				this.modal.form.tenantId = row.tenantId;
				//初始化店铺支持的语言
				this.initTranslateLanguage(tenantId);
			},

			/**
			 * 设置好评率
			 */
			setRate(row){
				this.modal.showRateDialog=true;
				this.modal.formFansRate.email=row.email;
			},

				/**
			 * 模态框保存
			 */
			modalSave() {
				debugger
				this.$refs['modalForm'].validate((valid) => {
					if (valid) {
                        this.submitFansRateModal();
                    } 
               });
			},

			submitFansRateModal() {
				if(this.isEdit) {
					this.editModal();
				} else {
					this.saveFansRateModal();
				}
			},

			/**
			 * 保存模态框
			 */
			saveFansRateModal() {
				debugger
				let postData_ = this.modal.formFansRate;
				const _this = this;

				this.axios.post('/ws/ops/v2/fansRate', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('设置好评率和粉丝数成功');
						_this.fansRateModalCancel();
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('设置好评率和粉丝数成功失败:' + message_);
					}
				});
			},

				/**
			 * 模态框取消 	
			 */
			modalshowRateDialogCancel() {
				this.resetModalForm();
				this.modal.showRateDialog = false;
			},

				/**
			 * 重置弹框表单
			 */
			resetModalForm() {
				this.$refs['modalForm'].resetFields();
				this.modal.form.goodevaluateRate = '';
				this.modal.form.fans = '';
			},
			//初始化店铺支持的语言
			initTranslateLanguage(tenantId) {
				const _this = this;
				this.axios.get('/ws/ms/merchant/translate/' + tenantId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.modal.table.data = res.data;
						if(0 ==res.data.length){
							this.alertshow=true;
							this.insertshow=false;
						}else{
							this.alertshow=false;
							this.insertshow=true;
						}	
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
				
			},
				
			addLanguage() {
			   this.modal.editshow = true;
			   this.modal.form.wDesc='';
			   this.modal.form.languageCode='';
			   this.modal.edit = false;
			   this.modal.edittitle = "新增店铺描述翻译";
			   this.initAllLanguage();
			},
			deletemodel(row) {
			    const _this = this;
				this.$confirm({
        			title: '操作提示',
        			width: 300,
        			content: '你确认删除本行记录吗?',
        			onOk: function() {
        				_this.delMerchantTranslateInfo(row);
        			}
        		});	
			},
			delMerchantTranslateInfo(row) {
				const _this = this;
				let tenantId = row.tenantId;
				let languageCode = row.languageCode;
				let dft = row.dft;
				if(0==dft){
				this.axios.delete('/ws/ms/merchant/translate/' + tenantId+ '/' + languageCode).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.initTranslateLanguage(tenantId);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
				}else{
					_this.$Message.warning("不可以删除默认翻译语言");
				}
			},
			editmodel(row) {
				this.modal.edittitle = "修改店铺描述翻译";
			    this.modal.editshow = true;
				this.modal.form = row;
				this.modal.edit = true;
				this.show1=false;
			    this.show2=true;
			},
			/**
			 * 判断语言和描述是否为空
			 */
			isBlank() {
				const _this = this;
				this.$refs['modalForm'].validate((valid) => {
					if (valid) {
						_this.submitModal();            
                    }
               });
			},
			/**
			 * 提交模态框事件
			 */
			submitModal() {
				if(this.modal.edit) {
					this.editModal();
				} else {
					this.saveModal();
				}
			},
			editModal() {
				let postData_ = this.modal.form;
				let tenantId = this.modal.form.tenantId;
				const _this = this;
				this.axios.put('/ws/ms/merchant/translate', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('修改店铺翻译成功');
					    _this.initTranslateLanguage(tenantId);
						
					} else {
						_this.$Message.warning('修改店铺翻译失败');
					}
				});
			    this.modalCancel();
			},
			saveModal() {
				let postData_ = this.modal.form;
				let tenantId = this.modal.form.tenantId;
				const _this = this;
				this.axios.post('/ws/ms/merchant/translate', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('新增店铺翻译成功');
						_this.initTranslateLanguage(tenantId);
						_this.modalCancel();
					} else {
						_this.$Message.warning('新增店铺翻译失败，该店铺翻译语言已存在');
					}
				});
				this.show1=true;
				this,show2=false;
			},
			modalCancel() {
				this.modal.editshow = false;
			},
			fansRateModalCancel(){
				this.modal.showRateDialog = false;
			},
            refresh(){
            	this.queryForm.shop = '';
				this.queryForm.linkman = '';
				this.queryForm.telephone = '';
				this.queryForm.status = 2;
				this.table.page.total = 0;
				this.table.page.pageSize = 10;
				this.table.page.pageNum = 1;
				this.query();
            },
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.get('/ws/ms/merchants/' + pageNum + '/' + pageSize, {params: this.queryForm}).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},	
			/**
			 * 改变商户状态
			 * 服务端去修改判断
			 */
			changeStatus(row) {
				let status = row.status;
				const _this = this;
				this.$confirm({
        			title: '操作提示',
        			width: 300,
        			content: '你是否需要'+(2 == status ? '下线' : '上线')+'选中商户',
        			onOk: function() {
        				_this.submitChangeStatus(row);
        			}
        		});	
			},
			/**
			 * 提交修改商户状态
			 */
			submitChangeStatus(row) {
				const _this = this;
				let tenantId = row.tenantId;
				this.axios.put('/ws/ms/merchant/status/' + tenantId).then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						_this.$Message.success('修改状态成功');
						_this.init();
					}else{
						let message_ = res.meta.message;
						_this.$Message.warning('修改状态失败:' + message_);
					}
				});
			}
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
	.tab-demo {
		margin-bottom: 10px;
	}
</style>